import { Component, OnInit, OnDestroy, ElementRef, Renderer, ViewChild } from '@angular/core';
import { InterceptorService } from '../../../service/interceptor/interceptor-service';
import { ApplicationService } from '../../../service/application.service';
import { DataSourceService } from '../../../service/data-source/data-source.service';
import { TagData } from '../../../entity/tag-data.model';
import { DatePipe } from '@angular/common';
import { Tag } from '../../../entity/tag.model';
@Component({
  selector: 'app-network',
  templateUrl: './network.component.html',
  styleUrls: ['./network.component.css']
})

export class NetworkComponent implements OnInit {

  [x: string]: any;
  @ViewChild('mainPart')
  private mainPart: ElementRef;
  @ViewChild('network')
  private network: ElementRef;
  interchanger: NetWork[] = [];
  netWorks: Net;
  servers: NetWork[];
  workstations: NetWork[];
  //是否显示遮罩层
  isShowMask: boolean = false;
  private curWwwPath: string;
  private pathName: string;
  private pos: number;
  localhostPath: string;
  imgs: string[] = ['集控拓扑.png', '主站拓扑.png', '子站拓扑.png'];
  imgSrc: string = '';
  distanceX:any;
  distanceY:any;
  constructor(
    private http: InterceptorService,
    private application: ApplicationService,
    private dataSource: DataSourceService,
    private datePipe: DatePipe,
    private renderer: Renderer
  ) {
  }

  ngOnInit() {
    this.curWwwPath = window.location.href;
    this.pathName = window.location.pathname;
    this.pos = this.curWwwPath.indexOf(this.pathName);
    this.localhostPath = this.curWwwPath.substring(0, this.pos);
    if (this.localhostPath.indexOf("localhost:4200") < 0) {
      if (this.localhostPath.indexOf("file:") < 0) {
        this.localhostPath = '.';
      } else {
        this.localhostPath = this.localhostPath + '/dist';
      };
    }


    const appCompany: string = this.application.appConfigData.appCompany;
    this.http.get(`./assets/config/${appCompany}_network.json`)
      .map(data => data.json())
      .subscribe(data => {
        if (data) {
          this.netWorks = data;
          this.initNetworkData();
        }

      }, err => {
        console.log('network.json获取报错');
      });
  }

  ngOnDestroy(): void {
    this.dataSource.dispose();
  }
  initNetworkData() {
    if (this.dataSource != null) {
      this.dataSource.dispose();
    };
    this.dataSource = new DataSourceService(this.http, this.datePipe);
    this.servers = this.netWorks.facility.filter(o => o.networkCategory === 'server');
    this.workstations = this.netWorks.facility.filter(o => o.networkCategory === 'workstation');
    if (this.netWorks.interchanger) {
      this.interchanger = this.netWorks.interchanger;
      this.interchanger.forEach(interchanger => {
        interchanger.device.forEach(dev => {
          dev.tagData = this.dataSource.bindingWhithCode(dev.networkCode);
        });
      });
    } else {
      this.interchanger = [{
        networkId: 1,
        networkCategory: 'server',
        networkName: '三区主网交换机',
        icon: 'interchanger.png',
        device: [
          {
            networkCode: 'HB_CPY_3_SW1NET',
            reticle: 1,
            tagData: {
              code: '',
              value: 1,
            }
          }
        ]
      },
      {
        networkId: 2,
        networkCategory: 'server',
        networkName: '三区备网交换机',
        icon: 'interchanger.png',
        device: [
          {
            networkCode: 'HB_CPY_3_SW2NET',
            reticle: 1,
            tagData: {
              code: '',
              value: 1,
            }
          }
        ]
      }];
    }

    this.servers.forEach(ser => {
      ser.device.forEach(dev => {
        dev.tagData = this.dataSource.bindingWhithCode(dev.networkCode);
      });
    });
    this.workstations.forEach(ser => {
      ser.device.forEach(dev => {
        dev.tagData = this.dataSource.bindingWhithCode(dev.networkCode);
      });
    });
    this.dataSource.begin().subscribe(
      next => {
      },
      error => {
        console.log(error);
      });
    this.onResize();
    ;
  }
  onResize() {
    // console.log(this.network.nativeElement.scrollWidth)
    //let width = this.network.nativeElement;
    /*if (this.network.nativeElement.scrollWidth) {
     width = this.network.nativeElement.scrollWidth ;
     this.renderer.setElementStyle(this.mainPart.nativeElement, 'width', width + 'px');

   } else {
     //console.log(this.network.nativeElement.offsetWidth )
     //width = this.network.nativeElement.offsetWidth - 90;
   } */

    /* const serversWidth = this.servers.length * 112;
    if (serversWidth > width) {

      width = this.workstations.length * 120;
    }
    width = serversWidth;
    if (this.workstations.length * 120 > width) {

      width = this.workstations.length * 120;
    }
    if (width) {
      width = width + 160;
    }
    this.renderer.setElementStyle(this.mainPart.nativeElement, 'width', width + 'px'); */

  }
  //鼠标滚轮滚动
  rollImg(e) {
    e = e || window.event;

    var img = document.getElementById('chgImg');
    var imgWidth = document.getElementById("chgImg").offsetWidth;//渲染的宽度
    var imgHeight = document.getElementById("chgImg").offsetHeight;//渲染的高度
    if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               
      if (e.wheelDelta > 0) { //当滑轮向上滚动时  
        //事件
        imgWidth = imgWidth * 1.2;
        imgHeight = imgHeight * 1.2;
        img.style.height = imgHeight + 'px';
        img.style.width = imgWidth + 'px';
      }
      if (e.wheelDelta < 0) { //当滑轮向下滚动时  
        //事件 
        imgWidth = imgWidth / 1.2;
        imgHeight = imgHeight / 1.2;
        img.style.height = imgHeight + 'px';
        img.style.width = imgWidth + 'px';
      }
    } else if (e.detail) {  //Firefox滑轮事件  
      if (e.detail > 0) { //当滑轮向上滚动时  
        //事件 
        imgWidth = imgWidth * 1.2;
        imgHeight = imgHeight * 1.2;
        img.style.height = imgHeight + 'px';
        img.style.width = imgWidth + 'px';
      }
      if (e.detail < 0) { //当滑轮向下滚动时  
        //事件  
        imgWidth = imgWidth / 1.2;
        imgHeight = imgHeight / 1.2;
        img.style.height = imgHeight + 'px';
        img.style.width = imgWidth + 'px';
      }
    }
  }
  // onmousedown(e) {
  //   console.log(e, '按下')
  //   var img = document.getElementById('chgImg');
  //   var e = e || window.event;
  //   this.distanceX = e.clientX - img.offsetLeft;
  //   this.distanceY = e.clientY - img.offsetTop;
  // }
  // onmousemove(e) {
  //   console.log(e, '移动')
  //   var img = document.getElementById('chgImg');
  //   var oevent = e || event;
  //   img.style.left = e.clientX - this.distanceX + 'px';
  //   img.style.top = e.clientY - this.distanceY + 'px';
  // }
  // onmouseup(e) {
  //   console.log(e, '起来')
  //   document.onmousemove = null;
  //   document.onmouseup = null;
  // }


  //显示遮罩层
  showMask(index) {
    var img = document.getElementById('chgImg');
    if (img) {
      img.style.width = '';
      img.style.height = '';
    }


    this.isShowMask = true;
    this.imgSrc = `${this.localhostPath}/assets/images/${this.imgs[index]}`;
  }
  //关闭遮罩层
  closeMask() {
    this.isShowMask = false;
  }

}
interface Net {
  interchanger: NetWork[];
  facility: NetWork[];
}
interface NetWork {
  networkId: number;
  networkCategory: string;
  networkName: string;
  icon: string;
  device: DeviceNet[];
}
interface DeviceNet {
  networkCode: string;
  reticle: number;
  tagData?: TagData;
  // tslint:disable-next-line:eofline
}


// WEBPACK FOOTER //
// ./src/app/module/monitor/network/network.component.ts